<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Happy Birthday</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta name="keywords" content="生日 贺卡 网页 H5 微场景"/>
    <meta name="description" content="送给最爱的你的生日礼物"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="initial-scale=1,width=device-width,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/animate.css">
	<link rel="stylesheet" href="css/a.css">
	<link rel="stylesheet" href="css/mobile.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
	<span class="music" id="musicico"><img  src="images/icon.png" alt="">
		<audio id="music" loop="loop" autoplay>
    		<source src="css/i/happybirthday.m4a" type="audio/ogg" />
		</audio>
	</span>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
        	<!-- 第一页 -->
           <div class="swiper-slide">
            	
            	<div class="swiper-slide-bg"></div>
	            	<div class="doorl"></div>
	            	<div class="doorr"></div>
	            	<p id="da" class="dazi"></p>
	            	<div class="p1-1" id="p1-1">
	            		<p class="ani p1" swiper-animate-effect="zoomInDown" swiper-animate-duration="1s" swiper-animate-delay="14.5s"><img src="images/font1.png" alt="zhuzhu"></p>
	            	</div>
	            	
	            	<div class="p1-2" id="p1-1">
	            		<p class="ani p2" swiper-animate-effect="zoomInUp" swiper-animate-duration="0.8s" swiper-animate-delay="15.3s"><img src="images/font-happy.png" alt=""></p>
	            	</div>
					<div  class="icon2 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.9s" swiper-animate-delay="4.9s">
						<img src="images/icon2.gif" alt="">
					</div>
	            <p class="tips" id="tips">向下滑动查看更多</p>       
            </div>

            <!-- 第二页 -->
            <div class="swiper-slide page2">
            	<h3 class="page2_title ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.5s"><img src="images/page2_title.png" alt=""></h3>
            	<div class="ani page2_phone" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
            		<div class="ani page2_talkW" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s">
            			<img src="images/headerw.png" alt="头像">
            			<p class="p2_p p1">我怎么这么嫌弃你呢？</p>
            		</div>
            		<div class="ani page2_talkM" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="2s">
            			<p class="p2_p p2">你嫌弃我是一天两天了吗</p>
            			<img src="images/headerm.png" class="p2_img1" alt="头像">
            		</div>
            		<div class="ani page2_talkW" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="3s">
            			<img src="images/headerw.png" alt="头像">
            			<p class="p2_p p1">都好几年了呢</p>
            		</div>
            		<div class="ani page2_talkM" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="4s">
            			<p class="p2_p p2">切，不屑，嫌弃，丑拒</p>
            			<img src="images/headerm.png" class="p2_img1" alt="头像">
            		</div>
            		<div class="ani page2_talkW" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="5s">
            			<img src="images/headerw.png" alt="头像">
            			<p class="p2_p p1">智障</p>
            		</div>
            	</div>
            </div>

			<!-- 第三页 -->		
            <div class="swiper-slide page3" id="page3">
            	<span id="p3Laugh" class="page3_laugh"></span>
            	<img  class="p3image" src="images/person1.jpg" alt="照片">
            	<img class="p3image" src="images/person2.jpg" alt="照片">
            	<img class="p3image" src="images/person3.jpg" alt="照片">
            	<img class="p3image" src="images/person4.jpg" alt="照片">
            </div>

            <!-- 第四页 -->
            <div class="swiper-slide page4">
                 <h3 class="ani" swiper-animate-effect="flipInX" swiper-animate-duration="2s" swiper-animate-delay="1s">这是一个有故事的视频</h3>
                <video width="100%" height="300" controls>
                    <source src="video/haha2.mp4" type="video/mp4">
                    <source src="video/haha2.ogg" type="video/ogg">
                    您的浏览器不支持 video 标签。
                </video>
            </div>

            <!-- 第五页 -->
            <div class="swiper-slide">
                <div class="page5">
                    <div class="bomb-rocket"></div>
                    <div class="bomb-rocket"></div>
                    <div class="bomb-rocket"></div>
                    <div class="bomb-rocket"></div>
                    <div class="bomb-rocket"></div>
                    <div class="bomb-rocket"></div>
                    <div class="bomb-rocket"></div>
                    <div class="bomb-rocket"></div>
                    <div class="bomb-rocket"></div>
                    <div class="bomb-rocket"></div>
                    <div class="bomb-rocket"></div>
                    <div class="bomb-rocket"></div>
                    <div class="bomb-rocket"></div>
                    <div class="bomb-rocket"></div>
                    <div class="bomb-rocket"></div>
                    <div class="normal-rocket"></div>
                    <div class="normal-rocket"></div>
                    <div class="normal-rocket"></div>
                    <div class="normal-rocket"></div>
                    <div class="normal-rocket"></div>
                    <div class="normal-rocket"></div>
                    <div class="normal-rocket"></div>
                    <div class="normal-rocket"></div>
                    <div class="normal-rocket"></div>
                    <div class="normal-rocket"></div>
                    <div class="normal-rocket"></div>
                    <div class="normal-rocket"></div>
                    <div class="normal-rocket"></div>
                    <div class="normal-rocket"></div>
                    <div class="normal-rocket"></div>

                    <div class="text">Happy birthday!</div>
                </div>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div> 
    <script src="js/jquery.js"></script>
    <script src="js/rem_js.js"></script>
    <script src="js/a.js"></script>
    <!-- Swiper JS -->
    <script src="js/swiper.jquery.min.js"></script>
	<script src="js/swiper.animate.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        paginationClickable: true,
        direction: 'vertical',
        onInit: function(swiper){
		    swiperAnimateCache(swiper); //隐藏动画元素 
		    swiperAnimate(swiper); //初始化完成开始动画
		  },
		  onSlideChangeEnd: function(swiper){ 
		    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
		  }
    });  
    </script>
</body>
</html>